<template>
  <div class="home-box">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <img :src="item.img" />
      </van-swipe-item>
    </van-swipe>
    <ul class="mule-ul" style="width:100%">
      <li class="mule-li">
        <router-link to="/newslist">
          <a href="javascript:;" class="a-box">
            <img src="../assets/pic/menu1.png" alt />
            <span>新闻资讯</span>
          </a>
        </router-link>
      </li>
      <li class="mule-li">
        <router-link to="/photo/list">
          <a href="javascript:;" class="a-box">
            <img src="../assets/pic/menu2.png" alt />
            <span>图片分享</span>
          </a>
        </router-link>
      </li>
      <li class="mule-li">
        <router-link to="/goods/list">
          <a href="javascript:;" class="a-box">
            <img src="../assets/pic/menu3.png" alt />
            <span>商品购买</span>
          </a>
        </router-link>
      </li>
      <li class="mule-li">
        <a href="javascript:;" class="a-box">
          <img src="../assets/pic/menu4.png" alt />
          <span>留言反馈</span>
        </a>
      </li>
      <li class="mule-li">
        <router-link to="/newslist">
          <a href="javascript:;" class="a-box">
            <img src="../assets/pic/menu5.png" alt />
            <span>视频专区</span>
          </a>
        </router-link>
      </li>
      <li class="mule-li">
        <a href="javascript:;" class="a-box">
          <img src="../assets/pic/menu6.png" alt />
          <span>联系我们</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      images: []
    }
  },
  components: {},
  created() {
    this.getImages()
  },
  mounted() {},
  methods: {
    async getImages() {
      const { data: res } = await this.$http.get('/api/getlunbo')
      this.images = res.message
      console.log(this.images)
    }
  }
}
</script>
<style lang="less" scoped>
.home-box {
  width: 100%;
  .van-swipe img {
    height: 200px;
    width: 100%;
  }

  .mule-ul {
    display: flex;
    flex-wrap: wrap;
    .mule-li {
      width: 33.33%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      flex-wrap: wrap;
      margin: 10px 0;
      .a-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
        text-decoration: none;
        color: black;
        img {
          width: 60px;
        }
        span {
          margin: 14px 0;
        }
      }
    }
  }
}
</style>
